<template>
  <div class="sidebar" v-show="sideBob" :style="{ width: caibob ? widths + 'px' : '120px' }"
    :class="[backBob ? 'sidebarBackBlur' : 'sidebarBackWhite']">
    <div class="logo" v-show="value2">
      <h4 v-show="logo">员工管理系统</h4>
      <img src="/images/logo.png" v-show="!logo" class="logo1">
    </div>
    <div class="titles" @click="setActive('首页', '/')">
      <div class="titles_ins" :class="{ 'active': num == '首页' }">
        <div>
          <span class="iconfont icon-shouye"
            :style="{ fontSize: caibob ? '' : '26px', marginLeft: caibob ? '' : '20px' }"></span>
          <span class="titles_ins_span2" :style="{ opacity: caibob ? '1' : '0', width: caibob ? '' : '40px' }">首页</span>
        </div>
        <span style="display: inline-block;width: 16px; height: 16px;"></span>
      </div>
    </div>
    <div class="titles" v-for=" (item, index) in navRouter " :key="item.title" style="height: 100%;"
      :style="{ height: item.isShow ? 50 * item.lieBiao.length + 40 + 'px' : '' }" @click="setActive1(index)"
      :class="{ 'active1': item.isShow }">
      <div class="titles_ins">
        <div>
          <span class="iconfont " :class="[item.xiaoTu]"
            :style="{ fontSize: caibob ? '' : '26px', marginLeft: caibob ? '' : '20px' }"></span>
          <span class="titles_ins_span2" :style="{ opacity: caibob ? '1' : '0', width: caibob ? '' : '50px' }">{{
            item.title }}</span>
        </div>
        <span class="iconfont icon-jiantouxia" :style="{ opacity: caibob ? '1' : '0' }"></span>
      </div>
      <ul :class="{ 'caiDanP': !caibob }" v-show="item.isShow1 || caibob">
        <li v-for=" (itemz, indexz) in item.lieBiao " :key="itemz" @click.stop="setActive(itemz, item.url[indexz])"
          :class="{ 'active': num == itemz }">
          <a href="javascript:;">{{ itemz }}</a>
        </li>
      </ul>
    </div>
  </div>
  <div class="navTop" v-show="topBob">
    <div class="navTop_top">
      <div class="navTop_left">
        <span class="iconfont icon-zhankaicaidan" v-show="caibob" @click="changeCai"></span>
        <span class="iconfont icon-shouqicaidan" v-show="!caibob" @click="changeCai"></span>
        <h3 v-show="value3">员工管理系统</h3>
      </div>
      <div class="navTop_right">
        <span class="iconfont icon-full-screen" @click="quanp" v-show="quan" style="font-size: 22px;"></span>
        <span class="iconfont icon-jiechuquanping" @click="quanp" v-show="!quan" style="font-size: 22px;"></span>
        <div class="userLin" @click="heigchan">
          <div class="navTop_right_imgs">
            <img :src="imgUrl" alt="头像">
          </div>
          <h3>{{ namePink }}</h3>
        </div>
        <ul :style="{ height: heightShow ? '80px' : '0' }">
          <li @click="toCenter">个人中心</li>
          <li @click="delClose">退出系统</li>
        </ul>
        <span class="iconfont icon-shezhi" @click="sheZhiCai"></span>
      </div>
    </div>
    <div class="navTop_nav" v-show="value4">
      <span class="iconfont icon-zuojiantou" @click="navJianTou(1)"></span>
      <ul ref="navTopNav">
        <li v-for=" (  items, index  ) in   navTop   " :key="items.title" :class="{ 'active': num == items.title }"
          @click="routerNav(items.title, items.url)">
          <a href="javascript:;">{{ items.title }}</a>
          <span class="iconfont icon-shanchu2" @click.stop="delNav(index)"></span>
        </li>
      </ul>
      <span class="iconfont icon-youjiantou" @click="navJianTou(2)"></span>
    </div>
  </div>
  <div class="sheZhi" :style="{ width: caiDanS ? '360px' : '0' }">
    <dl>
      <dt>
      <dd>系统配置</dd>
      <dd @click="delCai"><span class="iconfont icon-shanchu2"></span></dd>
      </dt>
      <dt>
      <dd></dd>
      <dd>左侧菜单</dd>
      <dd></dd>
      </dt>
      <dt>
      <dd>
        <span>显示LOGO</span>
        <el-switch v-model="value2" class="mt-2" style="margin-left: 24px" inline-prompt />
      </dd>
      <dd>
        <span>菜单主题</span>
        <div>
          <span>{{ colore }}</span>
          <span class="iconfont icon-jiantouxia"></span>
          <ul>
            <li @click="selsecteds('蓝色')">蓝色</li>
            <li @click="selsecteds('白色')">白色</li>
          </ul>
        </div>
      </dd>
      <dd>
        <span>菜单展开宽度</span>
        <input type="number" v-model="widths">
      </dd>
      </dt>
      <dt>
      <dd></dd>
      <dd>顶栏</dd>
      <dd></dd>
      </dt>
      <dt>
      <dd>
        <span>是否显示标题</span>
        <el-switch v-model="value3" class="mt-2" style="margin-left: 24px" inline-prompt />
      </dd>
      <dd>
        <span>是否显示顶部导航栏</span>
        <el-switch v-model="value4" class="mt-2" style="margin-left: 24px" inline-prompt />
      </dd>
      </dt>
      <dt>
      <dd>
        <button @click="huiFuMo">恢复默认设置</button>
      </dd>
      </dt>
    </dl>
  </div>
  <div class="mengBan" v-show="caiDanS" @click="delCai"></div>
</template>

<script setup>
import { reactive, ref, onMounted, watch, getCurrentInstance, onBeforeMount } from "vue"
import { useIndexStore } from "../pinia";
import mitter from '../utils/mitter'
import { useRouter, useRoute } from 'vue-router'
import { request } from '@/utils/axios/request.js'

// logo
let logo = ref(true)
let router = useRouter()
let route = useRoute()
let store = useIndexStore()
let that = getCurrentInstance()
// 头像
let imgUrl = ref('')
mitter.on('imgUrl', data => {
  imgUrl.value = data
})
// 用户名
let usernameLoca = localStorage.getItem('username')
let namePink = ref('未登录')
if (usernameLoca) {
  const names = async () => {
    try {
      let newdata1 = await request({
        url: `/admin/user/users1?username=${usernameLoca}`,
        method: 'get'
      })
      namePink.value = newdata1.data[0].nickname
      imgUrl.value = newdata1.data[0].url
    } catch (err) {
      console.log(err);
    }
  }
  names()
}
mitter.on('namePink', data => {
  namePink.value = data
})

// 全屏可视化大屏，隐藏侧边栏
let sideBob = ref(true)
mitter.on('sidebob', (data) => {
  sideBob.value = data
})

// 动态路由数据
let navRouter = ref([
  {
    id: 1,
    title: "基础数据",
    role: 2,
    status: "正常",
    xiaoTu: "icon-qianshoushenpitongguo-xianxing",
    lieBiao: ["打卡详情", "员工假期详细", "工作日设置"],
    url: ["/clockingDetails", "/employeeLeaveDetails", "/workingday"],
    times: "2022-1",
    isShow: false,
    isShow1: false,
    isShow2: true,
    shows: true,
  },
  {
    id: 3,
    title: "审批管理",
    role: 2,
    status: "正常",
    xiaoTu: "icon-shujuwajue",
    lieBiao: ["出差申请", "补卡申请", "请假申请", "加班申请"],
    url: [
      "/business",
      "/replacementCard",
      "/leaveRequest",
      "/applicationForExtraWork",
    ],
    times: "2022-1",
    isShow: false,
    isShow1: false,
    isShow2: true,
    shows: true,
  },
  {
    id: 5,
    title: "聊天室",
    role: 2,
    status: "正常",
    xiaoTu: "icon-queshengye_zanwushuju",
    lieBiao: ["公司聊天室"],
    url: ["/chat"],
    times: "2022-1",
    isShow: false,
    isShow1: false,
    isShow2: true,
    shows: true,
  },
  {
    id: 4,
    title: "系统管理",
    role: 2,
    status: "正常",
    xiaoTu: "icon-xitongshezhi",
    lieBiao: ["菜单管理", "部门管理", "消息公告"],
    url: ["/menu", "/department", "/message"],
    times: "2022-1",
    isShow: false,
    isShow1: false,
    isShow2: true,
    shows: true,
  },
])
if (store.role == 0) {
  navRouter.value = store.navRouter0
} else if (store.role == 1) {
  navRouter.value = store.navRouter1
} else if (store.role == 2) {
  navRouter.value = store.navRouter2
}
watch(store, (newV) => {
  if (newV.role == 0) {
    navRouter.value = newV.navRouter0
  } else if (newV.role == 1) {
    navRouter.value = newV.navRouter1
  } else if (store.role == 2) {
    navRouter.value = newV.navRouter2
  }
})


//导航路由
let navTop = reactive([
  {
    title: '首页',
    url: '/'
  }
])
//导航路由持久化
let navtopLoca = sessionStorage.getItem('navtopLoca')
if (navtopLoca) {
  let newNav = JSON.parse(navtopLoca)
  navTop = reactive(newNav)
}

//缓存路由导航顶部列表方法
let sessNav = (nav) => {
  let newNav = JSON.stringify(nav)
  sessionStorage.setItem('navtopLoca', newNav)
}

//全屏状态
let quan = ref(true)

//定义激活状态
let num = ref('首页')
// 登陆第一次进入首页
mitter.on('routerNavNum', (data) => {
  num.value = data
})
//菜单收缩
let caibob = ref(true)
//菜单收缩，显示导航
let caibobShow = ref(true)

//个人中心展示
let heightShow = ref(false)

let het = ref('')
const heigchan = () => {
  clearTimeout(het.value)
  heightShow.value = !heightShow.value
  het.value = setTimeout(() => {
    heightShow.value = false
  }, 2000)
}

//刷新页面定位当前路由,首页可视化大屏隐藏头部
let topBob = ref(true)
watch(route, (newV) => {
  navRouter.value.forEach((item1) => {
    item1.url.forEach((urls, index) => {
      if (urls == newV.path) {
        num.value = item1.lieBiao[index]
      }
    })
  })
  if (newV.path == '/' || newV.path == '/index') {
    topBob.value = false
  } else {
    topBob.value = true
  }
  let usernameLoca = localStorage.getItem('username')
  if (usernameLoca) {
    const names = async () => {
      try {
        let newdata1 = await request({
          url: `/admin/user/users1?username=${usernameLoca}`,
          method: 'get'
        })
        namePink.value = newdata1.data[0].nickname
        imgUrl.value = newdata1.data[0].url
      } catch (err) {
        console.log(err);
      }
    }
    names()
  }
})


//详情
let setActive = (item, url) => {
  num.value = item
  let bob = navTop.some(items => items.title == item)
  router.push(url)
  if (!bob) {
    navTop.push({
      title: item,
      url
    })
    sessNav(navTop)
  }
}
//列表
let tiemsq = ref('')
let setActive1 = (index) => {
  if (caibob.value) {
    if (!navRouter.value[index].isShow) {
      navRouter.value[index].isShow = true
    } else {
      setTimeout(() => {
        navRouter.value[index].isShow = false
      })
    }
  } else {
    clearTimeout(tiemsq.value)
    navRouter.value.forEach(item => {
      item.isShow1 = false
    })
    navRouter.value[index].isShow1 = !navRouter.value[index].isShow1
    navRouter.value[index].isShow2 = !navRouter.value[index].isShow2
    tiemsq.value = setTimeout(() => {
      navRouter.value[index].isShow1 = !navRouter.value[index].isShow1
      navRouter.value[index].isShow2 = !navRouter.value[index].isShow2
    }, 2000)
  }
}

//导航列表
let routerNav = (item, url) => {
  if (item == '首页') {
    num.value = item
    router.push('/')
  } else {
    navRouter.value.forEach(itema => {
      itema.lieBiao.forEach(items => {
        if (items == item) {
          num.value = items
        }
      })
    })
    router.push(url)
  }
}

// 导航列表左右箭头
let navJianTou;
onMounted(() => {
  navJianTou = (num) => {
    let container = that.refs.navTopNav;
    let scrollWidth = container.scrollWidth;
    let clientWidth = container.clientWidth;
    let maxScrollHeight = scrollWidth - clientWidth;

    if (num == 1) {
      container.scrollLeft = 0
    } else {
      container.scrollLeft = maxScrollHeight;
    }
  }
})

// 删除导航下标
let delNav = (index) => {
  if (navTop.length != 1) {
    if (index == 0) {
      if (navTop[index].title == num.value) {
        num.value = navTop[index + 1].title
        router.push(navTop[index + 1].url)
      }
    } else {
      if (navTop[index].title == num.value) {
        num.value = navTop[index - 1].title
        router.push(navTop[index - 1].url)
      }
    }
    navTop.splice(index, 1)
    sessNav(navTop)
  }
}

//菜单切换
let changeCai = () => {
  caibob.value = !caibob.value;
  caibobShow.value = !caibobShow.value;
  setTimeout(() => {
    logo.value = !logo.value
  }, 200)
  navRouter.value.forEach(item => {
    item.isShow = false
    item.isShow1 = false
    item.isShow2 = true
  })
}

// 开关
let value2 = ref(true)
let value3 = ref(true)
let value4 = ref(true)


//下拉菜单
let colore = ref('蓝色')

let backBob = ref(true)
let selsecteds = (color) => {
  console.log(color);
  if (color == '蓝色') {
    colore.value = color
    backBob.value = true
  } else {
    colore.value = color
    backBob.value = false
  }

}

//侧边栏宽度
let widths = ref(200)

//关闭菜单设置
let caiDanS = ref(false)
let delCai = () => {
  caiDanS.value = false
}



//开启菜单
let sheZhiCai = () => {
  caiDanS.value = true
}


//恢复默认
let huiFuMo = () => {
  value2.value = true
  value3.value = true
  value4.value = true
  colore.value = '蓝色'
  backBob.value = true
  widths.value = 200
}

//全屏
let quanp = () => {
  if (quan.value) {
    if (document.exitFullscreen) {

      document.documentElement.requestFullscreen();

    } else if (document.webkitExitFullscreen) {
      /* Safari */
      document.documentElement.webkitRequestFullscreen();

    } else if (document.msExitFullscreen) {
      /* IE11 */
      document.documentElement.msRequestFullscreen();

    } else if (document.webkitExitFullscreen) {
      /* Edge */
      document.documentElement.webkitEnterFullscreen();

    }
    quan.value = false
  } else {
    quan.value = true
    if (document.exitFullscreen) {

      document.exitFullscreen();

    } else if (document.mozCancelFullScreen) {
      /* Firefox */
      document.mozCancelFullScreen();

    } else if (document.webkitExitFullscreen) {
      /* Safari */
      document.webkitExitFullscreen();

    } else if (document.msExitFullscreen) {
      /* IE11 */
      document.msExitFullscreen();

    }
  }

}

// 退出系统
const delClose = () => {
  if (confirm("确认退出")) {
    localStorage.removeItem('username')
    localStorage.removeItem('token')
    heigchan()
    navTop = reactive([
      {
        title: '首页',
        url: '/'
      }
    ])
    sessNav(navTop)
    router.push('/login')
  }
}

//前往个人中心
const toCenter = () => {
  heigchan()
  router.push('/center')
}



</script>

<style scoped lang="less">
.logo1 {
  width: 30px !important;
  height: 30px !important;
  position: relative;
  // left: 50%;
  transform: translateX(-75%);
  border-radius: 50%;
  margin-top: 10px;
}

// 侧边栏
.sidebar {
  width: 200px;
  height: 100%;
  background-color: #001529;
  float: left;
  transition: all 0.3s ease-in-out;
  box-shadow: 1px 0 10px rgb(178, 178, 178, 0.5);

  span,
  a {
    color: #A6ADB4;
    transition: all 0.3s ease-in-out;
  }

  .logo {
    width: 100%;
    height: 50px;
    text-align: center;
    color: #EABCBD;
    line-height: 50px;
  }

  .titles {
    width: 100%;
    height: 40px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease-in-out;


    .titles_ins {
      width: 100%;
      height: 40px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin: 0 0 5px;

      .icon-jiantouxia {
        transition: all 0.1s linear;
      }

      &:hover span {
        color: white;
      }

      .titles_ins_span2 {
        display: inline-block;
        margin-left: 8px;
        width: 64px;
      }

      .icon-jiantouxia {
        font-size: 10px;
      }
    }

    ul {
      background-color: #000C17;
      display: flex;
      flex-direction: column;
      // align-items: center;
      justify-content: space-around;


      li {
        // display: none;
        height: 40px;
        line-height: 35px;
        // margin-top: 5px;
        margin: 2px 0;
        padding-left: 45px;
        transition: all 0.2s linear;
      }
    }

  }
}

// 头部
.navTop {
  display: flex;
  flex-direction: column;
  z-index: 999;

  .navTop_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;

    // box-shadow: 0.5px 0 5px #A6ADB4;
    .navTop_left {
      display: flex;
      align-items: center;

      span {
        font-size: 28px;
        margin-left: 15px;
      }

      h3 {
        margin-left: 20px;
        padding-bottom: 4px;
      }
    }

    .navTop_right {
      display: flex;
      align-items: center;

      ul {
        background-color: white;
        width: 100%;
        height: 0px;
        overflow: hidden;
        box-shadow: 1px 1px 10px #d3d8db;
        position: absolute;
        top: 52px;
        right: 75px;
        z-index: 1000;
        display: flex;
        width: 157px;
        flex-direction: column;
        // justify-content: center;
        align-items: center;
        transition: all 0.2s ease-in-out;

        li {
          height: 50%;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.2s linear;
          cursor: pointer;

          &:hover {
            background-color: rgba(216, 214, 214, 0.5);
          }
        }

        li:nth-child(2) {
          border-top: 0.5px solid rgba(216, 214, 214, 0.5);
        }
      }

      .userLin {
        display: flex;
        align-items: center;
        position: relative;
        cursor: pointer;
        padding: 10px;
        transition: all 0.2s linear;

        &:hover {
          background-color: rgba(216, 214, 214, 0.5);
        }

      }
    }

    span {
      display: inline-block;
      font-size: 28px;
      margin-right: 15px;
      padding: 15px;

      &:hover {
        background-color: rgba(216, 214, 214, 0.5);
      }
    }

    .navTop_right_imgs {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background-color: #1890FF;
      margin-right: 10px;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
      }
    }

    h3 {
      margin-right: 20px;
    }
  }

  .navTop_nav {
    display: flex;
    padding: 0 30px;
    margin-top: 5px;
    height: 30px;
    box-shadow: 0 1px 8px #d3d8db;
    position: relative;


    &>span {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      font-size: 24px;
      color: rgba(0, 157, 255, 0.5);
    }

    &>span:nth-of-type(1) {
      left: 6px;
    }

    &>span:nth-of-type(2) {
      right: 6px;
    }

    ul {
      display: flex;
      padding: 2px 0;
      scroll-behavior: smooth;

      li {
        // background-color: #1890FF;
        color: black;
        font-size: 14px;
        border-radius: 2px;
        display: flex;
        align-items: center;
        padding: 0 8px;
        margin-left: 5px;
        border: 0.5px solid #d3d8db;
        flex-shrink: 0;

        span {
          margin-left: 5px;
          font-size: 10px;
        }

        a {
          color: black;
        }
      }
    }
  }
}

//菜单
.caiDanP {
  position: absolute;
  left: 125px;
  width: 200px;
  z-index: 999;
}

// 设置
.sheZhi {
  width: 0px;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  background-color: white;
  z-index: 10001;
  box-shadow: -1px 0 10px rgb(143, 143, 143);
  transition: all 0.3s ease-in-out;

  dl {
    display: flex;
    flex-direction: column;

    span {
      flex-shrink: 0;
    }

    dd {
      flex-shrink: 0;
    }

    dt:nth-child(1) {
      width: 100%;
      padding: 16px 24px;
      display: flex;
      justify-content: space-around;
      border-bottom: 0.5px solid rgba(216, 214, 214, 0.5);
      margin-bottom: 45px;

      dd:nth-child(1) {
        margin-left: -120px;
      }

      dd:nth-child(2) {
        margin-right: -70px;
      }

    }

    dt:nth-child(2),
    dt:nth-child(4) {
      display: flex;
      justify-content: space-around;
      align-items: center;

      dd:nth-child(1),
      dd:nth-child(3) {
        height: 0px;
        width: 30%;
        border: 0.5px solid rgba(216, 214, 214, 0.5);
      }
    }

    dt:nth-child(3) {
      display: flex;
      flex-direction: column;
      padding-bottom: 40px;
      position: relative;

      dd {
        display: flex;
        justify-content: space-between;
        padding: 10px 20px;
        align-items: center;
      }

      dd:nth-child(2) {
        cursor: pointer;

        div {
          width: 100px;
          height: 30px;
          padding: 0 10px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          border: 0.5px solid rgba(216, 214, 214, 0.5);
          border-radius: 5px;
          // position: relative;

          &:hover ul {
            height: 80px;
          }

          ul {
            background-color: white;
            width: 121px;
            height: 0px;
            overflow: hidden;
            box-shadow: 1px 1px 10px #d3d8db;
            position: absolute;
            top: 95px;
            right: 20px;
            display: flex;
            flex-direction: column;
            // justify-content: center;
            align-items: center;
            transition: all 0.2s ease-in-out;

            li {
              height: 50%;
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              transition: all 0.2s linear;

              &:hover {
                background-color: rgba(216, 214, 214, 0.5);
              }
            }

            li:nth-child(2) {
              border-top: 0.5px solid rgba(216, 214, 214, 0.5);
            }
          }
        }
      }

      dd:nth-child(3) {
        input {
          width: 60px;
          height: 30px;
          padding: 0 11px;
          outline: none;
          border: 0.5px solid rgba(216, 214, 214, 0.5);
        }
      }
    }

    dt:nth-child(5) {
      display: flex;
      flex-direction: column;
      margin-bottom: 40px;

      dd {
        display: flex;
        justify-content: space-between;
        padding: 10px 20px;
        align-items: center;
      }
    }

    dt:nth-child(6) {
      display: flex;
      justify-content: center;

      dd {
        display: flex;
        padding: 10px 20px;
        align-items: center;

        button {
          outline: none;
          padding: 8px 10px;
          background-color: #1890FF;
          border: 0.5px solid rgba(216, 214, 214, 0.5);
          color: white;
          border-radius: 5px;
        }
      }
    }
  }
}

// 蒙版
.mengBan {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  background-color: rgba(247, 247, 247, 0.3);
  filter: brightness(1%);
}

.active {
  background-color: #1890FF;

  span {
    color: white;
  }

  a {
    color: white !important;
  }
}

.active1 {
  span {
    color: white;
  }

  .icon-jiantouxia {
    transform: rotateX(180deg);
    transition: all 0.1s linear;
  }
}

// 侧边栏的主题颜色
.sidebarBackBlur {
  background-color: #001529;

  span,
  a {
    color: #A6ADB4;
    transition: all 0.3s ease-in-out;
  }

  .active {
    background-color: #1890FF;

    span {
      color: white;
    }

    a {
      color: white !important;
    }
  }

  .active1 {
    span {
      color: white;
    }

    .icon-jiantouxia {
      transform: rotateX(180deg);
      transition: all 0.1s linear;
    }
  }
}

.sidebarBackWhite {
  background-color: rgb(255, 255, 255);

  .titles {
    ul {
      background-color: #FAFAFA;
    }

    .titles_ins {
      &:hover span {
        color: rgb(0, 157, 255);
      }
    }
  }



  span,
  a {
    color: rgb(61, 61, 61);
    transition: all 0.3s ease-in-out;
  }



  .active {
    background-color: #E6F7FF;

    span {
      color: rgb(0, 157, 255);
    }

    a {
      color: rgb(0, 157, 255) !important;
    }
  }

  .active1 {
    span {
      color: rgb(0, 157, 255);
    }

    .icon-jiantouxia {
      transform: rotateX(180deg);
      transition: all 0.1s linear;
    }
  }
}
</style>
